<template>
    <div>
        <h1 style="text-align:center;">excel导出</h1>
        <el-button type="primary" @click="onclick">导出表格</el-button>
        <el-table
        :data="tabledata"
        style="width: 100%">
            <el-table-column
                prop="year"
                label="年份"
                width="180">
            </el-table-column>
            <el-table-column
                prop="number"
                label="数量"
                width="180">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { tableData } from '@/request'
import {utils, writeFile} from 'xlsx'
export default {
    data () {
        return {
            tabledata:[]
        }
    },
    methods: {
        async GetTableData() {
            let data = await tableData() 
            // console.log(data);
            this.tabledata = data.data.data
        },
        onclick(){
            // 将表格数据转成excel数据
            let arr = this.tabledata.map(item => {
                return {
                    '毕业年份':item.year,
                    '毕业人数':item.number
                }
            })
            // console.log(arr);
            // 将json转为excel数据
            let sheet = utils.json_to_sheet(arr)
            // console.log(sheet);
            // 创建一个新的 Excel 工作簿对象它返回一个空白的工作簿，可以向其中添加工作表和单元格数据
            let book = utils.book_new()
            // 给excel添加一个工作簿，并放上数据
            utils.book_append_sheet(book,sheet,'毕业统计')
            // 将表格下载到本地
            writeFile(book,`毕业统计.xls`)
        }
    },
    created() {
        this.GetTableData()
    }
}
</script>

<style>
    
</style>
